<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});

import { ref, computed, watch, type Ref } from "vue";
// import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import * as echarts from "echarts/core";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
  theme
});

watch(
  () => props.data,
  () => {
    console.log(props.data);
    draw();
  }
);

const draw = () => {
  setOptions(
    {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        top: "20px",
        bottom: "20px",
        right: "10px",
        left: "40px"
      },
      // legend: {
      //   //@ts-expect-error
      //   right: true,
      //   data: ["视觉", "听觉", "动觉", "自语"]
      // },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0 //使x轴文字显示全
            // lineHeight: 2
          },
          axisTick: {
            show: false
          },
          // axisLabel: {
          //   interval: 0,
          //   // width: "70",
          //   overflow: "truncate"
          // },
          data: [
            "视觉 \n visual",
            "听觉 \n digital ",
            "动觉 \n kinesthetic",
            "自语 \n auditory"
          ]
          // triggerEvent: true
        }
      ],
      yAxis: [
        {
          type: "value",
          triggerEvent: true
        }
      ],
      series: [
        {
          // name: "watchers",
          type: "bar",
          barWidth: "20%",
          label: {
            //图形上显示文本标签
            show: true,
            position: "top"
            // textStyle: {
            //   fontWeight: "bolder",
            //   fontSize: "10", //文字大小
            //   color: "black" //文字颜色
            //   // textBorderColor: "#dbd0e6", //文字描边，颜色
            //   // textBorderWidth: 1, //文字描边，宽度
            //   // textShadowColor: "#dbd0e6", //文字阴影颜色
            //   // textShadowBlur: 2, //文字本身的阴影长度
            //   // textShadowOffsetX: 2, //文字本身的阴影 X 偏移
            //   // textShadowOffsetY: 1 //文字本身的阴影 Y 偏移
            // }
          },
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ["#ffc000", "#4f81db", "#00b050", "#f79646"];
                return colorList[params.dataIndex];
              }
            }
          },
          data: [
            props.data["visual"],
            props.data["digital"],
            props.data["kinesthetic"],
            props.data["auditory"]
          ]
        }
      ],
      addTooltip: true
    },
    {
      name: "click",
      callback: params => {
        console.log("click", params);
      }
    }
  );
};

// watch(
//   () => useAppStoreHook().getSidebarStatus,
//   () => {
//     delay(600).then(() => resize());
//   }
// );
</script>

<template>
  <div ref="barChartRef" class="w-full h-48" />
</template>
